<template>
    <div class="card-detil">
        <div class="top-button">
            <p class="revoke">联系墙主撕去便签</p>
            <div class="report">举报</div>
        </div>
        <note-card :note="card" class="note-card"></note-card>
        <div class="form">
            <textarea name="" id="message" placeholder="请输入内容" v-model="discuss"></textarea>
            <div class="button">
                <input type="text" id="name" value="匿名" v-model="name">
                <yk-button class="comment-button" :class="{ notallowed: !isDis }" @click="submit">评论</yk-button>
            </div>
        </div>
        <p class="title">评论{{ cards.commentCount[0].count }}</p>
        <div class="comment">
            <div class="commont-li" v-for="(e,index) in comments" :key="index">
                <div class="user-photo" :style="{'background-color': portrait[e.src]}"></div>
                <div class="commont-content">
                    <div class="top">
                        <p class="name">{{ e.name }}</p>
                        <p class="time">{{ dateOne(e.moment) }}</p>
                    </div>
                    <div class="commont-item">{{ e.comment }}</div>
                </div>
            </div>
            <p class="more" @click="getComent" v-show="nowpage > 0">加载更多</p>
        </div>
    </div>
</template>

<script>
    // 导入卡片组件
    import NoteCard from './NoteCard.vue'
    // 导入按钮组件
    import YkButton from './YkButton.vue'
    // 导入头像数据
    import { portrait } from '@/utils/data.js'
    // 导入时间格式化函数
    import { dateOne } from '@/utils/time.js'
    //
    import { insterCommentApi } from '@/api/index.js'
    //
    import { findCommentPageApi } from '@/api/index.js'
    export default {
        data() {
            return {
                comments:[],
                portrait,
                dateOne,
                discuss: '',
                name: '匿名',
                user: this.$store.state.user,
                nowpage: 1,
                pagesize: 10,
            }
        },
        components: {
            NoteCard,
            YkButton
        },
        props: {
            card: {
                default: {}
            }
        },
        computed: {
            isDis() {
                if(this.discuss.length > 0) {
                    return true
                }
                else {
                    return false
                }
            },
            cards() {
                return this.card
            }
        },
        methods: {
            submit() {
                if(this.isDis) {
                    let img =  Math.floor(Math.random() * 14)
                    let name = '匿名'
                    if(this.name) {
                        name = this.name
                    }
                    let data = {
                        wallId: this.cards.id,
                        userId: 32,
                        src: img,
                        moment: new Date(),
                        name: name,
                        comment: this.discuss,
                    }
                    insterCommentApi(data).then(() => {
                        this.comments.unshift(data);
                        this.cards.commentCount[0].count++
                        this.discuss = ''
                    })
                    // this.comment.unshift(data);
                    this.$message({type: 'success' , message: '评论成功！'})
                }
            },
            //
            getComent() {
                if(this.nowpage > 0) {
                    let data = {
                        id: this.cards.id,
                        page: this.nowpage,
                        pagesize: this.pagesize
                    }
                    findCommentPageApi(data).then((res) => {
                        
                        this.comments = this.comments.concat(res.message)
                        
                        if(res.message.length  == this.pagesize) {
                            this.nowpage++
                        }
                        else {
                            this.nowpage = 0
                        }
                    })
                }
            }
        },
        mounted() {
            this.getComent()
        },
        watch: {
            card() {
                this.nowpage=1;
                this.comments = [];
                this.getComent();
            }
        }
    }
</script>


<style lang="less" scoped>
    .card-detil {
        position: relative;
    }

    .note-card {
        width: 325px;
    }

    .top-button {
        position: fixed;
        top: 0;
        left: 0;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .report {
        margin: 0 0 0 30px;
        color: @error-color;
        font-size: @font-size-14;
        cursor: pointer;
        user-select: none;
    }

    .revoke {
        color: @primary-color;
        font-size: @font-size-14;
        cursor: pointer;
        user-select: none;
    }

    #message {
        width: 100%;
        height: 56px;
        resize: none;
        background-color: transparent;
        border: 1px solid rgba( 148, 148, 148, 1);
        margin: 12px 0 0 0;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 5px;
    }

    #name {
        width: 200px;
        height: 36px;
        border: 1px solid rgba( 148, 148, 148, 1);
        background-color: transparent;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 5px;
    }

    .button {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        margin: 8px 0 0 0;
    }

    .comment-button {
        width: 105px;
        margin: 0 0 0 10px;
    }

    .commont-li {
        display: flex;
    }

    .commont-li:nth-child(n + 2) {
        margin: 30px 0 0 0;
    }

    .user-photo {
        flex: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        // background-color: red;
    }

    .commont-content {
        margin: 0 0 0 8px;
    }

    .top {
        display: flex;
        display: flex;
        align-items: center;
    }

    .name {
        font-size: @font-size-14;
    }

    .time {
        font-size: @font-size-14;
        color: @gray-2;
        margin: 0 0 0 8px;
    }

    .commont-item {
        font-size: @font-size-14;
        color: @gray-1;
        margin: 4px 0 0 0;
    }

    .title {
        font-size: @font-size-14;
        margin: 12px 0 12px 0;
    }

    .more {
        width: 60px;
        height: 30px;
        border-radius: 15px;
        background-color: @gray-0;
        margin: 15px auto;
        color: @gray-4;
        cursor: pointer;
        font-size: @font-size-12;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>